<template>
  <div>
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item v-bind="formItemLayout" label="提现金额(元)">
        <a-input-number
          style="width: 100%"
          step="10000"
          :min="0"
          :max="balance"
          @change="changeMoney"
          :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
          v-decorator="[
            'money',
            {
              rules: [
                { required: true, message: '请输入申请金额' },
                {
                  validator: validateMoney
                }
              ]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="手续费">
        <a-input
          disabled
          v-decorator="[
            'charge',
            {
              initialValue: '2.0',
              rules: [{ required: true, message: '请输入手续费' }]
            }
          ]"
        >
          <span slot="suffix">元</span>
        </a-input>
      </a-form-item>

      <a-form-item v-bind="formItemLayout" label="实际到账金额(元)">
        <a-input-number
          style="width: 100%"
          step="10000"
          :min="0"
          @change="changeMoneyActual"
          v-decorator="[
            'actual',
            {
              rules: [{ required: true, message: '实际到账金额' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="到账银行账号">
        <a-select
          v-decorator="[
            'bank_id',
            {
              rules: [{ required: true, message: '请选择到账银行账号' }]
            }
          ]"
        >
          <a-select-option
            :value="item.id"
            v-for="(item, index) in cardList"
            :key="index"
          >
            <img
              :src="getImg(item.bank_name)"
              width="20px"
              alt=""
              style="vertical-align: middle;margin-right: 0.3rem"
            />{{ item.bank_name }}&nbsp;&nbsp;{{
              item.bank_num
            }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="验证码">
        <a-row :gutter="8">
          <a-col :span="14">
            <a-input
              placeholder="验证码"
              autocomplete="off"
              v-decorator="[
                'code',
                {
                  initialValue: '',
                  rules: [
                    {
                      required: true,
                      message: '请输入验证码'
                    }
                  ]
                }
              ]"
            />
          </a-col>
          <a-col :span="10">
            <a-button
              class="code-btn"
              block
              @click="getCode"
              v-if="!isShowTimer"
              >获取验证码</a-button
            >
            <span v-else class="count-wrapper">{{ count }}s</span>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="支付密码">
        <a-input
          type="password"
          v-decorator="[
            'pay_password',
            {
              rules: [{ required: true, message: '请输入支付密码' }]
            }
          ]"
        />
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button
          class="submit-btn"
          type="primary"
          html-type="submit"
          size="large"
        >
          确认
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { Row, Col, InputNumber } from "ant-design-vue";
import bankList from "@/lib/bank";
import "@/assets/fonticon/iconfont.css";
export default {
  components: {
    aInputNumber: InputNumber,
    aRow: Row,
    aCol: Col
  },
  data() {
    return {
      bankList,
      timer: null,
      isShowTimer: false,
      count: 60,
      autoCompleteResult: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      cardList: [],
      headers: {
        token: this.$crypto.getAES(localStorage.getItem("ctoken"))
      },
      id: null
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    validateMoney(rule, value, callback) {
      if (value && value < 2) {
        callback("提现金额不能小于2.0元");
      } else if (value && value > this.balance) {
        callback("提现金额不能大于你的账户余额");
      } else if (!value && value === 0) {
        callback("提现金额不能小于2.0元");
      }
      callback();
    },
    changeMoney(e) {
      if (e) {
        let money = e;
        let count = 2;
        let actual = money - count;
        this.form.setFieldsValue({ actual: actual });
      } else {
        this.form.setFieldsValue({ actual: "" });
      }
    },
    changeMoneyActual(e) {
      if (e) {
        let actual = e;
        let count = 2;
        let money = actual + count;
        this.form.setFieldsValue({ money: money });
      } else {
        this.form.setFieldsValue({ money: "" });
      }
    },
    getImg(name) {
      let bankInfo = this.bankList.find(value => {
        if (value.name === name) {
          return value;
        }
      });
      return bankInfo.img;
    },
    getCardList() {
      this.$ajax
        .post(this.$api.getCardList)
        .then(res => {
          this.cardList = res.data;
        })
        .catch(err => {
          this.$message.error(err);
        });
    },
    // 获取验证码
    getCode() {
      clearInterval(this.timer);
      this.count = 60;
      this.$ajax
        .post(this.$api.sendPayCode, {
          mobile: this.mobile
        })
        .then(res => {
          this.$message.success(res.msg);
          this.isShowTimer = true;
          this.timer = setInterval(() => {
            this.count--;
            if (this.count === 0) {
              this.isShowTimer = false;
              clearInterval(this.timer);
              this.count = 60;
            }
          }, 1000);
        })
        .catch(err => {
          this.isShowTimer = false;
          this.$message.error(err);
        });
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let obj = JSON.parse(JSON.stringify(values));
          delete obj.charge;
          delete obj.actual;
          this.$ajax
            .post(this.$api.withdraw, obj)
            .then(() => {
              this.$message.success("提现成功");
              this.$router.push({ name: "withdraw" });
            })
            .catch(err => {
              this.$message.error(err);
            });
        }
      });
    }
  },
  computed: {
    mobile() {
      return this.$store.state.mobile;
    },
    balance() {
      return this.$store.state.balance;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  created() {
    this.$commonJs.getBalanceApi();
    this.getCardList();
  }
};
</script>

<style scoped lang="less">
.iconfont {
  font-size: 20px;
}
.ant-form {
  max-width: 650px;
  margin: 0 auto;
}
</style>
